<!--个人认证和个人认证修改-->
<template>
  <div>
    <el-form :model="formData" ref="formData" :rules="rules" label-width="172px" class="auth-form">
      <div class="base-info">个人基本信息</div>
      <el-form-item prop="merchName" label="姓名：">
        <el-input placeholder="请输入姓名" v-model.trim="formData.merchName" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item prop="phoneNo" label="手机号码：">
        <el-input placeholder="请输入手机号码" v-model.trim="formData.phoneNo" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item prop="merchCertType" label="证件类型：">
        <el-select v-model="formData.merchCertType" placeholder="请选择证件类型">
          <el-option label="身份证" value="01"></el-option>
          <el-option label="户口簿" value="02"></el-option>
          <el-option label="护照" value="03"></el-option>
          <el-option label="其他" value="04"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="merchCertId" label="证件号码：">
        <el-input placeholder="请输入证件号码" v-model.trim="formData.merchCertId" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item prop="mcc" label="行业类别：">
        <el-col :span="17">
          <el-input placeholder="请输入MCC码" v-model.trim="formData.mcc" autocomplete="off"></el-input>
        </el-col>
        <el-col :span="7">
          <el-button type="primary" plain @click="showMccData" class="ml20">查看MCC码</el-button>
        </el-col>
      </el-form-item>
      <el-form-item label="身份证照：">
        <uploadImg :imgUrl="formData.qulifLincPic"  @uploadImgSuc="uploadImageSuc($event, '01')"></uploadImg>
      </el-form-item>
      <el-form-item  label="自拍照：">
        <uploadImg :imgUrl="formData.qulifShopPic"   @uploadImgSuc="uploadImageSuc($event, '02')"></uploadImg>
      </el-form-item>
      <el-form-item prop="county" label="家庭地址：" :class="[countyFlag? 'user-county':'']">
          <v-distpicker :province="formData.province" :city="formData.city" :area="formData.county" @province="onProvince" @city="onCity"
            @selected="onSelected">
          </v-distpicker>
        </el-form-item>
      <el-form-item prop="busiAddress" label="居住地址：">
        <el-input placeholder="请输入居住地址" v-model.trim="formData.busiAddress" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="" class="pt50">
          <el-button type="primary" class="btn-item" v-stop-reClick @click="onSubmit('formData')" >{{status}}</el-button>
        <!-- <el-button class="btn-item" @click="backStep">返回</el-button> -->
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import '@/style/userAuth.less'
import VDistpicker from 'v-distpicker'
// import MccDialog from '@/components/common/MccDialog'
import uploadImg from '@/components/common/uploadImg'
export default {
  props: {
    userInfo: {
      type: Object
    },
    status: {
      type: String,
      default: '提交'
    }
  },
  data () {
    return {
      formData: this.userInfo,
      countyFlag: false,
      loading: false,
      rules: {
        merchName: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        merchCertType: [{ required: true, message: '请选择证件类型', trigger: 'change' }],
        merchCertId: [{ required: true, message: '请输入证件号码', trigger: 'blur' }],
        mcc: [{ required: true, message: '请输入MCC码', trigger: 'blur' }],
        county: [{ required: true, message: '请输入省市区', trigger: 'blur' }],
        busiAddress: [{ required: true, message: '请输入居住地址', trigger: 'blur' }],
        phoneNo: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { pattern: /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/, message: '请输入正确手机号', trigger: 'change' }
        ]
      },
      MCCView: false
    }
  },
  components: { VDistpicker, uploadImg },
  created() {
  },
  methods: {
    uploadImageSuc (filePath, imgType) {
      if (imgType === '01') {
        this.formData.qulifLincPic = filePath
      } else if (imgType === '02') {
        this.formData.qulifShopPic = filePath
      }
    },
    onProvince (data) {
      this.formData.county = ''
      this.countyFlag = false
    },
    onCity (data) {
      this.formData.county = ''
      this.countyFlag = false
    },
    onSelected (data) {
      this.formData.province = data.province.value
      this.formData.city = data.city.value
      this.formData.county = data.area.value
      this.countyFlag = true
    },
    showMccData () {
      this.$emit('showMccData')
    },
    onSubmit (formData) {
      this.$refs[formData].validate((valid) => {
        if (!valid) return this.$message.error('有必填项未填写')
        if (this.status === '提交') {
          this.submitData()
        } else {
          this.changeData(formData)
        }
      })
    },
    changeData(formData) {
      this.$emit('changeData', formData)
    },
    submitData () {
      const qiyeParams = {
        transCode: 'POMM0002',
        userType: '01',
        ...this.formData
      }
      localStorage.setItem('addUser', JSON.stringify(this.formData))
      this.$store.dispatch('authSubmit', qiyeParams)
    },
    backStep () {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="less" scoped>
  .user-county {
    font-size: 20px;
    /deep/ .el-form-item__error {
      display: none;
    }
  }
</style>
